<template>
  <div class="hmyz">
    <Card>
      <div slot="cRight">
        <el-form inline size="small">
          <el-form-item>
            <el-input placeholder="请输入查询的号码" v-model="val"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleClick">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <Table
        :tableData="
          this.tableDataAA.row.length ? this.tableDataAA : this.tableData
        "
        selection
      />
      <Pagination :total="tableData.row.length" />
    </Card>
    <el-button
      type="primary"
      style="float:right;margin:20px"
      @click="
        $message({
          message: '预占成功',
          type: 'success'
        })
      "
      >预 占</el-button
    >
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Card,
    Table,
    Pagination
  },

  data() {
    return {
      val: '',
      role: 'juesea',
      tableDataAA: {
        col: [
          {
            prop: 'colA',
            label: '400号码'
          },
          {
            prop: 'colB',
            label: '号码级别'
          },
          {
            prop: 'colC',
            label: '是否可用'
          }
        ],
        row: []
      },
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: '400号码'
          },
          {
            prop: 'colB',
            label: '号码级别'
          },
          {
            prop: 'colC',
            label: '是否可用'
          }
        ],
        row: [
          {
            colA: '4008864920',
            colB: '一类特殊号码',
            colC: '可用'
          },
          {
            colA: '4006752004',
            colB: '二类特殊号码',
            colC: '可用'
          },
          {
            colA: '4001504088',
            colB: '三类特殊号码',
            colC: '可用'
          },
          {
            colA: '4008573476',
            colB: '四类特殊号码',
            colC: '可用'
          },
          {
            colA: '4002905487',
            colB: '五类特殊号码',
            colC: '可用'
          },
          {
            colA: '4002875977',
            colB: '六类特殊号码',
            colC: '可用'
          },
          {
            colA: '4009104217',
            colB: '六类特殊号码',
            colC: '可用'
          },
          {
            colA: '4001886256',
            colB: '七类特殊号码',
            colC: '可用'
          },
          {
            colA: '4005028797',
            colB: '普通号码',
            colC: '可用'
          }
        ]
      },
      tableDataB: {
        col: [
          {
            prop: 'colA',
            label: '400号码'
          },
          {
            prop: 'colB',
            label: '号码级别'
          },
          {
            prop: 'colC',
            label: '是否可用'
          }
        ],
        row: [
          {
            colA: '4008833456',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4006754893',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4001908993',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4008489393',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4002493933',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4000998773',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4005998745',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4001884990',
            colB: '普通号码',
            colC: '可用'
          },
          {
            colA: '4004338939',
            colB: '普通号码',
            colC: '可用'
          }
        ]
      }
    }
  },

  methods: {
    handleClick() {
      this.tableDataAA.row.push({
        colA: this.val,
        colB: '普通号码',
        colC: '可用'
      })
    }
  },

  computed: {
    tableData() {
      if (this.role === 'juesea') return this.tableDataA
      return this.tableDataB
    }
  },

  created() {
    this.$bus.$on('switchRole', val => {
      this.role = val
    })
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-form-item {
  margin-bottom: 0 !important;
}
</style>
